<template>
  <div class="wrap" id="wrap">
    <!--    轮播图  -->
    <div class="index_lunbo">
      <div class="swiper-container" style="width: 100%;height:3.1rem;">
        <div class="swiper-wrapper" style="width: 100%;height:100%">
          <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="el.url">
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <p class="back"  @click="back"><img src="../../assets/img/zuojiantou.png" alt=""></p>
<!--      <div class="hideBack">-->
<!--        <p>商品详情</p>-->
<!--        -->
<!--      </div>-->
    </div>
    <div class="cantuan">
      <div class="ct_left">
        <div class="ct_l">
          <div class="ct_left1"><span>￥</span>0.1</div>
          <div class="ct_left2"><p>原价<span>￥{{16.8}}</span></p><p>抢购价</p></div>
        </div>
<!--        <div class="ct_left3">全民团</div>-->
      </div>
      <div class="ct_right">
        <p>距结束还剩</p>
        <div class="ct_right1"><p>00</p>&nbsp;:&nbsp;<p>00</p>&nbsp;:&nbsp;<p>00</p></div>
      </div>
    </div>
    <!--  详情  -->
    <div class="infoWrap">
      <div class="infoName">
        <img src="../../../static/img/jx.png" alt=""><p>{{'百香果酸乳酪慕斯（木糖醇）'}}</p>
      </div>
      <div class="infoDetails">除了酸味，百香果是世界上已知，充满芳香的水果之一。 冰淇淋口感，不同层次的酸与冰凉</div>
    </div>


    <!-- 规格选择  -->
    <div class="guige">
      <div class="gg_2" @click="yhjShow=true">
        <p>领劵</p>
        <div class="gg2_img"><p>满150减25</p><p>满50减5</p></div>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
      <div class="gg_2" @click="ggShow">
        <p>已选</p>
        <p><span v-for="x in arr" style="color: #575757">{{x}}&nbsp;&nbsp;</span></p>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
      <div class="gg_2" @click="isShow('show1')">
        <p>配送</p>
        <p style="color: #575757">{{sel1}}</p>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
    </div>

    <!--  评论  -->
    <div class="commentWrap">
      <div class="comment-tit">
        <div><p></p><p>商品评价(26)</p></div>
        <p @click="jump('CommodityEvaluation')"><span>查看全部</span><img src="../../../static/img/youjiantou003.png" alt=""></p>
      </div>

      <div class="comment-box" >
        <div class="comment-box-top">
          <div class="comment-box-img">
            <img src="../../../static/img/uhead.jpg" alt="">
            <div class="comment-box-name">
              <span>代码搬运工</span>
              <div class="star">
                <van-rate allow-half v-model="9.5/2" readonly color="#FF7005" />
              </div>
            </div>
          </div>
          <div class="comment-box-time">
            <p>04-30 14:43</p>
          </div>
        </div>
        <div class="comment-box-info" @click="jump('CommentDetails')">
          这个蛋糕真的超级好吃，香甜细腻，这个味的真的不要太好
          吃！！一定要试试！！
        </div>
        <div class="comment-img" @click="jump('CommentDetails')">
          <img src="../../../static/img/es1.png" alt="">
          <img src="../../../static/img/es2.png" alt="">
          <img src="../../../static/img/es3.png" alt="">
        </div>
        <div class="comment-box-icon">
          <p>口味5星/包装5星/配送满意</p>
          <div>
            <p @click="thisComment=!thisComment"><img :src="thisComment?'../../../static/img/tz1ed.png':'../../../static/img/tz1.png'" alt=""><span>356</span></p>
            <p><img src="../../../static/img/tz2.png" alt=""><span>356</span></p>
          </div>
        </div>
      </div>
    </div>

    <!--  宝贝详细信息  -->
    <div class="details">
      <div>宝贝详情</div>
      <div class="detailsInfo">
        <p>该商品暂无详情</p>
      </div>
    </div>

    <footer>
      <div class="foot_2" @click="jump('shopInfo/shopInfoShop')">进入店铺</div>
      <div class="foot_3" @click="jump('order')">立即抢购</div>
    </footer>

    <!--  选择支付  -->
    <van-popup v-model="look" class="fkPopup" get-container="#wrap" >
      <div class="fkbox">
        <div class="fktit">{{ggList.name}}</div>
        <div class="fkitem">
          <p>{{ggList.tit1.name}}</p>
          <div>
            <p v-for="(x,y) in ggList.tit1.list" :class="ggList.thisSel[0]==y?'selected':''" @click="selGG(0,'tit1',y)">
              {{x}}</p>
          </div>
        </div>
        <div class="fkitem">
          <p>{{ggList.tit2.name}}</p>
          <div>
            <p v-for="(x,y) in ggList.tit2.list" :class="ggList.thisSel[1]==y?'selected':''" @click="selGG(1,'tit2',y)">
              {{x}}</p>
          </div>
        </div>
        <div class="fkitem">
          <p>{{ggList.tit3.name}}</p>
          <div>
            <p v-for="(x,y) in ggList.tit3.list" :class="ggList.thisSel[2]==y?'selected':''" @click="selGG(2,'tit3',y)">
              {{x}}</p>
          </div>
        </div>
        <div class="fkNum">
          <p>数量</p>
          <van-stepper v-model="value" theme="round" button-size="22" min="1" max="99"  @change="selectNum" disable-input />
        </div>
        <div class="yxguige">
          <p>已选规格：</p>
          <p><span v-for="x in arr">{{x}}&nbsp;&nbsp;</span></p>
        </div>
        <div class="guifoot">
          <p><span>￥</span>32</p>
          <p @click="closeGuiGe">确定</p>
        </div>
        <p style="height: .01rem;width:100%;"></p>
      </div>
    </van-popup>

    <van-action-sheet
      v-model="show1"
      :actions="actions"
      description="配送方式"
      @select="onSelect"
    />
<!--  优惠券选择  -->
    <van-popup v-model="yhjShow" round position="bottom" :style="{ height: '55%' }">
        <div class="yhj_wrap">
            <div class="yhj_tit"><p>领取优惠券</p><img src="../../../static/img/closeTu.png" alt="" @click="yhjShow=false"></div>
            <div class="yhj_item_wrap">
              <div class="yhj_item" v-for="x in yhjList">
                <div class="yhj_item_left">
                  <p><span>￥</span>{{x.money}}</p>
                  <p>满{{x.m}}元可用</p>
                </div>
                <div class="yhj_item_right">
                  <div class="yhj_item_rt_left">
                    <p>{{x.money}}元代金券</p>
                    <img src="../../../static/img/dianpuhongbao@2x.png" alt="">
                    <p>{{x.time}}</p>
                  </div>
                  <p :class="x.usered?'yhj_item_btn usered':'yhj_item_btn'" @click="x.usered = true">{{x.usered?'立即使用':'立即领取'}}</p>
                </div>
              </div>
            </div>
        </div>
    </van-popup>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/css/swiper.css';
  import Vue from 'vue';
  import { ActionSheet,popup } from 'vant';
  Vue.use(ActionSheet);
  Vue.use(popup);
  export default {
    name: "panicDetails",
    data() {
      return {
        lunbolist: [{text: '', url: '../../static/img/shop1.png'}, {text: '', url: '../../static/img/shop2.png'}, {
          text: '',
          url: '../../static/img/shop3.png'
        }], // 轮播图
        arr: ['小份','标准冰(推荐)','有奶油'],
        look:false,
        ggList:{name:'百香果酸乳酪慕斯（木糖醇）',tit1:{name:'规格',list:['小份','中份','大份']},tit2:{name:'温度',list:['标准冰(推荐)','热','温']},tit3:{name:'奶油',list:['有奶油','无奶油']},thisSel:[0,0,0]},
        sel1:'外卖配送',
        show1: false,
        actions: [
          { name: '到店自取' },
          { name: '外卖配送' },
        ],
        showList:true,
        yhjShow:false,
        yhjList:[{money:20,m:50,time:'有效期至2020年5月30号',usered:false},{money:20,m:50,time:'有效期至2020年5月30号',usered:true},{money:20,m:50,time:'有效期至2020年5月30号',usered:true}],
        thisComment:false, // 当前是否点赞
        value:1
      }
    },
    mounted() {
      //    这里配置swiper轮播图
      new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        observer:true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay:{
          delay:3000,
          disableOnInteraction: false
        }
      });
    },
    methods: {
      back() {
        this.$router.back();
      },
      jump(page) {
        this.$router.push({
          name: page
        })
      },
      closeGuiGe(){
        this.look = false;
      },
      ggShow(){
        this.look = true;
      },
      selGG(index,name,num){
        let arr = [...this.arr];
        arr[index] = this.ggList[name].list[num]
        this.arr = arr;
        let arr1 = this.ggList;
        arr1.thisSel[index] = num;
        this.ggList = arr1;
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.show1 = false;
        this.sel1 = item.name;
      },
      isShow(res) {
        this[res] = true;
      },
      selectNum(value){
        console.log(value)
      }
    }
  }
</script>

<style scoped>
  .wrap {
    background-color: #F5F5F5;
    min-height: 6.17rem;
    padding-bottom: .5rem;
  }

  /* 轮播图部分 */
  .index_lunbo {
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }
  .back {
    width: .2rem;
    height: .25rem;
    position: fixed;
    top: .15rem;
    left: .13rem;
    text-align: center;
    z-index: 999;
  }
  .back>img {
    width: .1rem;
    height: .17rem;
  }

  .index_swiper_listimg {
    width: 100%;
    height: 100%;
  }

  .cantuan {
    width: 100%;
    height: .55rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .ct_left {
    height: 100%;
    width: 2.75rem;
    background: linear-gradient(90deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .ct_right {
    width: 1rem;
    height: 100%;
    background: rgba(255, 191, 37, 1);
    box-shadow: 0 .01rem 0 0 rgba(219, 219, 219, 1);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .ct_l {
    display: flex;
    flex-flow: row;
    align-items: center;
    width: 70%;
    box-sizing: border-box;
    padding-left: .1rem;

  }

  .ct_left1 {
    max-width: 60%;
    color: #ffffff;
    font-size: .41rem;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .ct_left1 > span {
    font-size: .2rem;
  }

  .ct_left2 {
    color: #ffffff;
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    margin-left: .05rem;
  }

  .ct_left2 > p:nth-child(1) {
    margin-bottom: .05rem;
  }

  .ct_left2 > p:nth-child(1) > span:nth-child(1) {
    text-decoration: line-through;
  }

  .ct_left2 > p:nth-child(2) {
    width: .38rem;
    height: .17rem;
    background: rgba(255, 255, 255, 1);
    border-radius: .02rem;
    color: #FF7611;
    font-size: .11rem;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    line-height: .17rem;
  }

  .ct_left3 {
    color: #ffffff;
    font-size: .24rem;
    font-family: PingFang SC;
    font-weight: 500;
    max-width: 40%;
    text-align: center;
  }

  .ct_right > p:nth-child(1) {
    color: #FF7611;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    margin-bottom: .05rem;
  }

  .ct_right1 {
    color: #FF7611;
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .ct_right1 > p {
    width: .14rem;
    height: .14rem;
    background: rgba(255, 118, 17, 1);
    border-radius: .02rem;
    color: #ffffff;
    text-align: center;
    line-height: .14rem;
  }

  .infoWrap {
    width: 100%;
    max-height: .8rem;
    box-sizing: border-box;
    padding: .1rem .15rem .1rem .15rem;
    background-color: #ffffff;
    margin-bottom: .1rem;
  }

  .infoName {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .03rem;
  }

  .infoName > img:nth-child(1) {
    width: .37rem;
    height: .14rem;
    margin-right: .1rem;
  }

  .infoName > p:nth-child(2) {
    font-size: .15rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #282828;
  }

  .infoDetails {
    width: 100%;
    box-sizing: border-box;
    padding-right: .2rem;
    font-size: .13rem;
    line-height: .19rem;
    color: #A7A7A7;
    font-family: PingFang SC;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /*  规格 */
  .guige {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 .15rem;
    margin-bottom: .1rem;
  }

  .guige > div {
    height: .5rem;
    border-bottom: .01rem solid #F8F8F8;
  }

  .guige > div:nth-last-child(1) {
    border: none;
  }

  .gg_1, .gg_2 {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
  }

  .gg_1 > img:nth-child(1) {
    width: .6rem;
    height: .25rem;
    margin-right: .1rem;
  }

  .gg_1 > p {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .gg_1 > img:nth-child(3), .gg_2 > img:nth-child(3) {
    width: .06rem;
    height: .11rem;
    position: absolute;
    right: 0;
  }

  .gg_2 {
    color: #919191;
  }

  .gg_2 > p {
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
  }

  .gg_2 > p:nth-child(1) {
    margin-right: .15rem;
  }
  .gg2_img>p {
    height: .1rem;
    padding: .05rem .1rem;
    line-height: .1rem;
    font-size:.1rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
    text-align: center;
    background-image: url("../../../static/img/youhuijuanbeijingtu.png");
    margin-right: .05rem;
    background-size: 100% 100%;
  }
  .gg2_img {
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .evaluate {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem .15rem;
    background-color: #ffffff;
  }
  .eval_tit {
    height: .5rem;
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .eval_tit>p:nth-child(1) {
    height: .17rem;
    border-left: .04rem solid #FF9547;
    padding-left: .1rem;
    color: #232323;
    font-size:.15rem;
    line-height: .17rem;
    font-family:PingFang SC;
    font-weight:bold;
  }
  .eval_tit>p:nth-child(2) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .eval_tit>p:nth-child(2)>span {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .eval_tit>p:nth-child(2)>img {
    width: .06rem;
    height: .11rem;
    margin-left: .1rem;
  }

  footer {
    width: 100%;
    height: .5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
  }
  .foot_2,.foot_3 {
    height: 100%;
    width: 50%;
    line-height: .5rem;
    text-align: center;
    color: #ffffff;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
  }

  .foot_2 {
    background-color: #FFBF25;
  }
  .foot_3 {
    background-color: #FF7611;
  }

  .ggfukuan {
    width: 100%;
    /*height: 6.67rem;*/
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,.6);
  }

  .fktit {
    height: .5rem;
    line-height: .5rem;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #282828;
  }
  .fkitem {
    margin-bottom: .1rem;
  }
  .fkitem>p {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #242424;
    margin-bottom: .1rem;
  }
  .fkitem>div {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    /*justify-content: space-between;*/
  }
  .fkitem>div>p:nth-child(2) {
    margin: 0 .2rem;
  }
  .fkitem>div>p {
    width:.8rem;
    height:.36rem;
    background:rgba(241,241,241,1);
    border:.01rem solid #F1F1F1;
    border-radius:.07rem;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #666666;
    text-align: center;
    line-height: .36rem;
  }
  .yxguige {
    height: .4rem;
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    background-color: #FAFAFA;
  }
  .yxguige>p:nth-child(1) {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .yxguige>p:nth-child(2) {
    color: #333333;
  }
  .guifoot {
    height: .6rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .guifoot>p:nth-child(1) {
    font-size:.24rem;
    font-family:San Francisco Display;
    font-weight:500;
    color: #FF433C;
  }
  .guifoot>p:nth-child(1)>span {
    font-size: .16rem;
  }
  .guifoot>p:nth-child(2) {
    width:1.08rem;
    height:.35rem;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .06rem .11rem 0 rgba(255,118,17,0.4);
    border-radius:.17rem;
    line-height: .35rem;
    text-align: center;
    color: #ffffff;
    font-size:.15rem;
    font-family:Adobe Heiti Std;
    font-weight:normal;
  }
  .closeGuiGe {
    width: .38rem;
    height: .38rem;
    position: absolute;
    left: calc(50% - .19rem);
    bottom: -.52rem;
  }
  .selected {
    background:rgba(255,239,220,1) !important;
    border:.01rem solid rgba(255,118,17,1) !important;
    color: #FF7611 !important;
  }
  /* 弹出框 */
  >>> .van-action-sheet__description {
    padding: .16rem;
    color: #333333;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    line-height: .2rem;
  }
  >>> .van-action-sheet__cancel, .van-action-sheet__item {
    font-size: .18rem;
    line-height: .5rem;
    color: #333333;
    text-align: left;
    box-sizing: border-box;
    padding-left: .2rem;
  }
  >>> .van-popup {
    min-height: 2rem;
  }
  >>> .van-popup--bottom.van-popup--round {
    border-radius: .2rem .2rem 0 0;
  }
  >>> .van-action-sheet__item {
    height: .5rem;
  }
  >>> .fkPopup{
    transform: translate3d(0,0,0);
    top: 15% !important;
    left: calc(50% - 1.65rem) !important;
  }

  .yhj_wrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: .3rem .15rem;
    background-color: #F5F5F5;
  }
  .yhj_tit {
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
    margin-bottom: .15rem;
  }
  .yhj_tit>p {
    width: 100%;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
    text-align: center;
  }
  .yhj_tit>img {
    width: .26rem;
    height: .26rem;
    position: absolute;
    right: 0;
  }
  .yhj_item_wrap {
    width: 100%;
    height: 2.5rem;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .yhj_item {
    width: 100%;
    height: 1.05rem;
    background-image: url("../../../static/img/youhuiquanbj1111.png");
    background-size: 100% 100%;
    margin-bottom: .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .yhj_item_left {
    width: 28%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .yhj_item_left>p:nth-child(1) {
    font-size:.36rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FF002A;
  }
  .yhj_item_left>p:nth-child(1)>span {
    font-size: .24rem;
  }
  .yhj_item_left>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .yhj_item_right {
    width: 71%;
    height: 100%;
    box-sizing: border-box;
    padding-left: .1rem;
    padding-right: .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .yhj_item_rt_left>p:nth-child(1) {
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #323134;
  }
  .yhj_item_rt_left>img:nth-child(2) {
    width: .45rem;
    margin: .05rem 0;
  }
  .yhj_item_rt_left>p:nth-child(3) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #CCCCCC;
  }
  .yhj_item_btn {
    width:.7rem;
    height:.27rem;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .06rem .11rem 0 rgba(255,118,17,0.4);
    border-radius:.13rem;
    text-align: center;
    line-height: .27rem;
    font-size:.1rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #FFFFFF;
  }
  .usered {
    background: none !important;
    box-shadow: none !important;
    border:.01rem solid rgba(255,112,4,1);
    color: #FF6F02;
  }


  .commentWrap {
    background-color: #FFFFFF;
    padding: 0 .15rem;
    margin-bottom: .1rem;
  }
  .comment-tit {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-tit>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-tit>div>p:nth-child(1) {
    width:.04rem;
    height:.17rem;
    background:rgba(255,149,71,1);
    border-radius: .02rem;
    margin-right: .1rem;
  }
  .comment-tit>div>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #232323;
  }
  .comment-tit>p>span {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-tit>p>img {
    width: .06rem;
    height: .11rem;
    margin-left: .08rem;
  }

  .star {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .15rem;
  }

  .comment-box-top {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-box-img {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-box-img>img {
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    margin-right: .13rem;
  }
  .comment-box-name {
    height: .35rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .comment-box-name>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #4E4E4E;
  }
  .comment-box-name>.star {
    margin: 0;
  }
  .comment-box-time {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .comment-box-time>p {
    text-align: right;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-box-info {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(98,98,98,1);
    line-height:.2rem;
    margin: .15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .comment-img {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  .comment-img>img {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .05rem;
    margin-bottom: .05rem;
  }
  .comment-box-icon {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-box-icon>p:nth-child(1) {
    text-align: right;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-box-icon>div>p {
    padding: 0 .1rem;
    height:.22rem;
    background:rgba(255,255,255,1);
    border:.01rem solid rgba(204, 204, 204, 1);
    border-radius:.11rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    margin-left: .1rem;
  }
  .comment-box-icon>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-box-icon>div>p>span {
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #808080;
  }
  .comment-box-icon>div>p>img {
    width: .13rem;
    height: .13rem;
    margin-right: .05rem;
  }

  /* 评分适配 */
  >>> .van-rate__icon {
    font-size: .1rem;
  }
  >>> .van-rate__item:not(:last-child) {
    padding-right: .04rem;
  }

  .hideBack {
    width: 100%;
    height: .5rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background: linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
  }
  .hideBack>p:nth-child(1) {
    width: 100%;
    height: 100%;
    color: #ffffff;
    text-align: center;
    line-height: .5rem;
    font-size: .18rem;
  }

  /* 宝贝详情 */
  .details {
    background-color: #FFFFFF;
  }
  .details>div:nth-child(1) {
    width: .6rem;
    margin: 0 auto;
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    position: relative;
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .details>div:nth-child(1):before{
    height: .01rem;
    width: .5rem;
    position: absolute;
    background-color: #e3e3e3;
    content: '';
    top: 50%;
    left:-.55rem;
  }
  .details>div:nth-child(1):after {
    height: .01rem;
    width: .5rem;
    position: absolute;
    background-color: #e3e3e3;
    content: '';
    top: 50%;
    right: -.55rem;
  }

  .detailsInfo{
    text-align: center;
  }
  .detailsInfo>p {
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    height: .3rem;
    line-height: .3rem;
  }



  .fkNum {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
  }
  .fkNum>p {
    margin: 0 !important;
  }

  .fkitem > p,.fkNum>p {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #242424;
    margin-bottom: .1rem;
  }

  .fkbox {
    min-height: 4rem;
    background: rgba(255, 255, 255, 1);
    border-radius: .06rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding: .1rem .2rem;
    position: relative;
  }

  /* 弹窗适配 */
  >>> .fkPopup {
    padding: .02rem;
    background-color: transparent;
  }
  /* 加减数量适配 */
  >>> .van-stepper__minus,>>> .van-stepper__plus {
    width: .22rem !important;
    height: .22rem !important;
    border-radius: .04rem 0 0 .04rem;
    padding: .04rem;
  }
  >>> .van-stepper__minus::before,>>> .van-stepper__plus::before {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper__minus::after {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper__plus::after {
    width: .01rem;
    height: .13rem;
  }
  >>> .van-stepper__input {
    border-width: .01rem 0;
    margin: 0 .02rem;
    font-size: .14rem;
    width: .32rem;
    height: .22rem !important;
  }
</style>
